<template>
	<view class="flex-d-lc r-20 overflow-hidden apply-resume">
		<view class="flex-c w p-h36 apply-resume__hd">
			<text class="text-700-132">提示</text>
		</view>
		<view class="p-h36 w flex-1 flex-d-t apply-resume__bd">
			<view>
				<text class="text-400-128">确定要投递所选岗位</text>
			</view>
			<Checkbox v-model="checked">
				<text class="text-400-328"
					>我已查看承诺书
					<text class="link" @click="gotoUrl">《承诺书协议》</text></text
				>
			</Checkbox>
		</view>
		<view class="p-h36 p-v32 w apply-resume__ft">
			<view class="cancel-btn" @click="handleCancel">
				<text>取消</text>
			</view>
			<view class="confirm-btn" @click="handleConfirm">
				<text>确认</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { defineEmits, ref } from "vue";
import Checkbox from "@/components/checkbox.vue";

const emit = defineEmits<{
	(e: "cancel"): void;
	(e: "confirm"): void;
}>();

const checked = ref(false);

const handleCancel = () => {
	emit("cancel");
};

const handleConfirm = () => {
	if (!checked.value) {
		uni.$u.toast("请同意承诺书");
		return;
	}

	emit("confirm");
};
const gotoUrl = () => {
	uni.navigateTo({
		url: "/pages_site/pages/notice2/notice2",
	});
};
</script>

<style lang="scss" scoped>
.link {
	color: $bg-color-2;
}
.apply-resume {
	width: 620rpx;
	height: 529rpx;
	&__hd {
		height: 141rpx;
		background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
	}
	&__bd {
		height: 127rpx;
		justify-content: space-evenly;
		text-align: center;
	}
	&__ft {
		display: flex;
		justify-content: center;
		.cancel-btn,
		.confirm-btn {
			width: 136rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.cancel-btn {
			color: $text-color-3;
			background-color: $bg-color-4;
		}
		.confirm-btn {
			margin-left: 32rpx;
			color: $text-color-2;
			background-color: $bg-color-2;
		}
	}
}
</style>
